<template>
	<div id="detailed">
		<at-tooltip :content="this.form.aagency_name" :placement="'top'">
				<div class="bottomLine">{{this.form.aagency_name}}的详情</div>
		</at-tooltip>
	
		<div style="padding:20px">
			<div class="detailedBox">
				<p class="detailedBoxtitle">基础信息</p>
				<div>
					<div>机构名称</div>
					<div>类型</div>
					<div>所属区域</div>
					<div>地理位置</div>
					<div>上级机构</div>
					<div>监管机构</div>
					<div>联系人</div>
					<div>联系人电话</div>
					<div>联系人邮箱</div>
					<div>创建时间</div>
					<div>备注</div>
				</div>
				<div></div>
				<div>
					<div>{{this.form.aagency_name}}</div>
					<div>{{this.form.type_name}}</div>
					<div v-html="area(this.form.belong_area)">{{this.form.belong_area}}</div>
					<div v-html="position(this.form)">{{this.form.city}}</div>
					<div v-html="node(this.form.bagency_name)">{{this.form.bagency_name}}</div>
					<div v-html="node(this.form.cagency_name)">{{this.form.cagency_name}}</div>
					<div v-html="person_name(this.form.alinkman)">{{this.form.alinkman}}</div>
					<div v-html="person_one(this.form.atelephone)">{{this.form.atelephone}}</div>
					<div v-html="person_email(this.form.alinkman_email)">{{this.form.alinkman_email}}</div>
					<div >{{this.form.ar_time}}</div>
					<div v-html="remark(this.form.aremarks)">{{this.form.aremarks}}</div>
				</div>
			</div>
			<at-button @click="goBack" type="primary" class="goBack">返回</at-button>
		</div>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
	  props: {
	    nodeId: String,
	    required: true
	  },
	  name: 'newdetailedmechanisms',
	  computed: {
	    ...mapState({
	      mechanismDetalie: state => state.mechanism.mechanismDetalie,
	      form: state => state.mechanism.nodeDetails, // 列表信息
	      loading: state => state.mechanism.loading // 加载状态
	    })
	  },
	  methods: {
	    goBack () {
	      this.$store.commit('mechanism/mechanismDetalie', false)
	      this.$store.commit('mechanism/treeShow', true)
	    },
	    fomatter (row) {
	      if (row == null || row === undefined) {
	        return '-'
	      } else {
	        return row
	      }
	    },
	    position (row) {
	      if (row.area !== null && row.area !== undefined && row.area !== '') {
	        return `${row.province}-${row.city}-${row.area}`
	      } else {
	        if (row.city !== null && row.city !== undefined && row.city !== '') {
	          return `${row.province}-${row.city}`
	        } else if (row.province !== null && row.province !== undefined && row.province !== '') {
	          return `${row.province}`
	        } else {
	          return '-'
	        }
	      }
	    },
	    node (row) {
	      if (row == null || row === undefined) {
	        return '-'
	      } else {
	        if (row === '默认节点') {
	          return '-'
	        } else {
	          return row
	        }
	      }
	    },
	    area (row) {
	      if (row == null || row === undefined) {
	        return '-'
	      } else {
	        return row
	      }
	    },
	    person_name (row) {
	      if (row == null || row === undefined) {
	        return '-'
	      } else {
	        return row
	      }
	    },
	    person_one (row) {
	      if (row == null || row === undefined) {
	        return '-'
	      } else {
	        return row
	      }
	    },
	    person_email (row) {
	      if (row == null || row === undefined) {
	        return '-'
	      } else {
	        return row
	      }
	    },
	    remark (row) {
	      // console.log(this.form)
	      if (row == null || row === undefined) {
	        return '-'
	      } else {
	        return row
	      }
	    }
	  },
	  mounted () {
	    this.$store.dispatch('mechanism/getNodedetails', { 'aagency_id': this.nodeId })
	    // this.$store.dispatch('mechanism/getNodetype', 0) // 获取机构类型
	    this.$store.dispatch('mechanism/getArea', 0) // 获取区域列表信息
	  },
	  watch: {
	    nodeId (val, oldval) {
	      this.$store.dispatch('mechanism/getNodedetails', { 'aagency_id': this.nodeId })
	    }
	  }
	}
</script>
<style scoped>
	#detailed .roleName {
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
	}

	#detailed .at-col {
		padding: 20px;
		overflow: hidden;
	}

	#detailed .tittle {
		background-color: #f7f8fc;
		border: 1px solid #EEE;
		display: inline-block;
		width: 34.8%;
		height: 30px;
		margin-top: -4px;
		line-height: 30px;
		text-align: right;
		padding-right: 20px;
		border-bottom: none;
	}

	#detailed .atRow span:nth-child(2) {
		border: 1px solid #EEE;
		width: 65%;
		margin-left: -8px;
		height: 30px;
		line-height: 30px;
		display: inline-grid;
		padding-left: 20px;
		border-bottom: none;
	}

	#detailed #tree {
		display: inline-block;
		margin-left: 0px;
		height: 300px;
		overflow: auto;
	}

	#detailed .at-col .role {
		float: left;
		height: 300px;
		line-height: 300px;
	}

	#detailed {
		background-color: white;
		overflow: hidden;
		width: 100%;
	}
	#detailed .goBack {
		display: block;
		width: 100px;
		margin: 0px auto;
		margin-top: 30px;
	}
	#detailed .detailedBox div:nth-child(2)>div {
		text-align: right
	}

	#detailed .detailedBox div:nth-child(3)>div {
		text-align: left
	}

	#detailed .detailedBoxbottom>div:nth-child(2)>div {
		text-align: right;
	}

	#detailed .detailedBox>div>div {
		height: 40px;
		line-height: 40px;
	}

	#detailed .bottomDetailed {
		display: grid;
		grid-template-rows: 40px 80px auto
	}

	#detailed .bottomDetailed>div {
		padding-top: 10px
	}

	#detailed .detailedBoxtitle {
		grid-column: 1 / 4;
		border-bottom: 1px solid #EEE;
		font-size: 12px;
		color: #5c6781;
		height: 50px;
		line-height: 50px;
		padding-left: 10px;
		margin: 0;
		font-weight: bold;
	}

	#detailed .detailedBox {
		display: grid;
		grid-template-columns: 130px 40px auto;
		border: 1px solid #EEE
	}

	#detailed .detailedBoxbottom {
		display: grid;
		grid-template-columns: 130px 40px auto;
		border: 1px solid #EEE;
	}

	#detailed .roleName {
		width: 200px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block !important;
		float: right;
		margin-right: 1.1px;
	}

	#detailed .at-col {
		padding: 10px 20px 10px 20px;
		overflow: hidden;
	}

	#detailed .tittle {
		background-color: #f7f8fc;
		border: 1px solid #EEE;
		border-bottom: none;
		display: inline-block;
		width: 34.8%;
		height: 30px;
		line-height: 30px;
		text-align: right;
		padding-right: 20px
	}

	#detailed .atRow span:nth-child(2) {
		border: 1px solid #EEE;
		width: 65%;
		margin-left: -8px;
		height: 30px;
		line-height: 30px;
		display: inline-grid;
		padding-left: 20px;
		border-bottom: none;
		border-left: none;
	}

	#detailed #tree {
		display: inline-block;
		margin-left: 0px;
		height: 300px;
		overflow: auto;
	}

	#detailed .at-col .role {
		float: left;
		height: 300px;
	}

	#detailed {
		background-color: white;
		overflow: hidden;
		width: 100%;
	}

	#detailed .bottomLine {
		/* max-width: 434px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height:50px;
    line-height:50px;
    padding-left:20px;
    border-bottom:1px solid #eeeeee;
    font-weight:bold;
    color:#5c6781;
    font-size:14px;
	}
</style>